<template>
	<view class="join_pay">
		<view class="wallet_head">
			<view class="wallet_total">
				<view class="total_sign">¥</view>
				<view class="total_num">{{certification_fee}}</view>
			</view>
			<view class="total_title">入谱费用</view>
			<image class="customer" :src="photo_cdn + 'zpupload/static/img/customer.png'"></image>
		</view>
		<view class="pay_list">
			<radio-group @change="radioChange">
				<view class="pay_box" v-for="(item,index) in payList" :key="item.value">
					<view class="pay_left">
						<image class="pay_img" :src="item.img"></image>
						<view class="pay_title">{{item.name}}</view>
					</view>	
					<view>
						<radio :value="item.value" :checked="index === current" :color="$themecolor" />
					</view>
				</view>	
			</radio-group>
		</view>
		<view class="pay_btn_box" @tap="confirmpay()">
			<view class="pay_btn">确认支付</view>
		</view>
	</view>
</template>

<script>
	import {mapActions} from "vuex";
	import {apppay} from "@/utils/apppay.js";
	import {joinFamilyOrder} from "@/utils/api/zupu.js"
	import {getUserinfo} from "@/utils/api/api.js";
	
	import {claimFamilyPeople} from "@/utils/api/zupu.js";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn} = config.baseUrl;
	export default{
		data(){
			return{
				photo_cdn,
				payList:[{
						value:'weixin',
						name:'微信支付',
						checked: 'true',
						img:'/static/img/weixin.png'
					},
					// #ifdef APP-PLUS || H5
					{
						value:'alipay',
						name:'支付宝',
						img:'/static/img/alipay.png'
					}
					// #endif
				],
				current: 0,
				pay_way:'weixin',
				log:{},
				people_number:'',//支付时需要传过去的一个编号（后端反的）
				certification_fee:'',//支付金额
				
				family_tree_id:"",//操作人id
				family_id:"",//族谱id
				source:"",//操作来源  1添加配偶   2添加父辈  3 添加子辈  4 初始化节点 5未支付的人重新交钱  -1 扫码进来激活支付
			}
		},
		onLoad(option){
			this.source = option.source?parseInt(option.source):"";
			this.family_tree_id = option.family_tree_id?option.family_tree_id:"";
			this.family_id = option.family_id?option.family_id:"";
			
			this.people_number = option.number;
			this.getUserInfofun();
		},
		methods: {
			...mapActions(['ModifyItemData','ModifyItemDataTop','familyTreeListfun']),
			//切换支付方式
			radioChange(evt) {
				
				for (let i = 0; i < this.payList.length; i++) {
					if (this.payList[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}	
				if(evt.detail.value=='weixin'){
					this.pay_way = 'weixin'
				}else if(evt.detail.value=='alipay'){
					this.pay_way = 'alipay';
				}
			},
			getUserInfofun(){
				getUserinfo({
					
				}).then((res)=>{
					this.certification_fee = res.data.userinfo.certification_fee;
				})
			},
			//确认支付
			confirmpay(){
				console.log(this.pay_way)
				this.joinFamilyOrderfun();
			},
			//加入族谱收费支付
			joinFamilyOrderfun(){
				joinFamilyOrder({
					pay_way:this.pay_way,
					amount:this.certification_fee,
					number:this.people_number,
					family_id:this.family_id
				}).then((res)=>{
					if(res.code==1){
						this.log = res.data.info;
						console.log(this.log,'log')
						if(this.pay_way=='weixin'){
							this.weixinAlipayfun('weixin');
						}else if(this.pay_way=='alipay'){
							this.weixinAlipayfun('alipay');
						}
					}else{
						this.$api.msg(res.msg);
					}
				})
			},
			//微信支付宝支付
			weixinAlipayfun(paytype){
				//paytype 'weixin'微信 'alipay'支付宝
				apppay(
					this.log.id,
					this.log.need_pay,
					paytype,
				).then((res)=>{
					console.info(res);
					uni.showToast({
						title:"支付成功"
					})
					
					if(this.source==-1){//扫码激活
						let jh_params = uni.getStorageSync("jh_params")
						console.info("jh_params",jh_params);
						//支付成功后 再去请求认领 上门的参数的带过来的
						claimFamilyPeople({
							...jh_params,
						}).then(res=>{
							this.$api.msg(res.msg);
							
							//进入族谱
							uni.redirectTo({
								url:`/pages/zupu/familytrees/familytrees?family_id=${this.family_id}&type=`
							})
						})

						return ;
					}else if(this.source==4){//初始化节点
						this.familyTreeListfun({family_id:this.family_id,init_one:1,})
					}else if(this.source==2){//父辈
						//向上加载数据
						this.ModifyItemDataTop({family_id:this.family_id,family_tree_id:this.family_tree_id});
					}else{
						//向下加载数据
						this.ModifyItemData({family_id:this.family_id,family_tree_id:this.family_tree_id});
					}
					setTimeout(()=>{
						uni.navigateBack();
					},1500)
					
				}).catch((err)=>{
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #FFFFFF;
}	
.wallet_head{
	background-color: $themecolor ;
	padding: 82rpx 0 ;
	position: relative;
	.wallet_total{
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		.total_sign{
			font-size: 40rpx;
			margin-right: 20rpx;
		}
		.total_num{
			font-size: 78rpx;
		}
	}
	.total_title{
		font-size: 28rpx;
		text-align: center;
		color: #FFFFFF;
		margin-top: 34rpx;
	}
	.customer{
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 37rpx;
		height: 34rpx;
	}
}
.pay_list{
	.pay_box{
		padding: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.pay_left{
			display: flex;
			align-items: center;
		}
		.pay_img{
			width: 55rpx;
			height: 55rpx;
			margin-right: 35rpx;
		}
		.pay_title{
			font-size: 34rpx;
		}
	}	
}
.pay_btn_box{
	background-color: #FFFFFF;
	width: 100%;
	padding: 42rpx 62rpx;
	position: fixed;
	bottom: 0;
	.pay_btn{
		width: 100%;
		background-color: $themecolor;
		text-align: center;
		color: #FFFFFF;
		font-size: 34rpx;
		padding: 34rpx 0;
		border-radius: 50px;
	}
}
</style>